<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新品有戏后台管理</title>
    <link href="__CSS__/boot.css" rel="stylesheet">
    <link href="__STATIC__/layui/css/layui.css" rel="stylesheet">
    <script src="__JS__/jquery.js"></script>
    <script src="__JS__/layer/layer.js"></script>
    <script src="__STATIC__/layui/layui.js"></script>
</head>
<body>
{include file="base/header" /}
<div style="width: 500px; margin: 0 auto;margin-top: 50px;">
    <form class="layui-form" id="insert" name="myform" method="post" enctype="multipart/form-data">
        <input type="hidden" name="bid" value="{$bid}">
        <input type="hidden" name="code"  id="newcode"/>
        <input type="hidden" name="image" id="newimage" />
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">产品名称</label>
            <div class="layui-input-block">
                <input type="text" name="pname" required  lay-verify="required" placeholder="产品名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">产品图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadimage">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item"  id="imgs"  style="display: none">
            <label class="layui-form-label" style="width: 100px;">新图片</label>
            <div class="layui-input-block">
                <img src="" id="images" width="100px" height="100px"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">产品二维码</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadcode">
                    <i class="layui-icon">&#xe67c;</i>上传二维码
                </button>
            </div>
        </div>
        <div class="layui-form-item" style="display: none" id="codes">
            <label class="layui-form-label" style="width: 100px;" >二维码</label>
            <div class="layui-input-block">
                <img src="" id="code" width="100px" height="100px"/>
            </div>
        </div>
        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label" style="width: 100px">产品视频</label>-->
            <!--<div class="layui-input-block">-->
                <!--<button type="button" class="layui-btn" id="uploadvideo">-->
                    <!--<i class="layui-icon">&#xe67c;</i>上传视频-->
                <!--</button>-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">进价</label>
            <div class="layui-input-block">
                <input type="text" name="purchaseprice" required  lay-verify="required" placeholder="进价(元)" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">售价</label>
            <div class="layui-input-block">
                <input type="text" name="retailprice" required  lay-verify="required" placeholder="售价(元)" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">条形码</label>
            <div class="layui-input-block">
                <input type="text" name="barcode" onblur="codes()" required  lay-verify="required" placeholder="条形码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">产品类型</label>
            <div class="layui-input-block">
                <select name="category" lay-verify="required">
                    <option value=""></option>
                    {foreach $category as $val}
                    <option value="{$val.title}">{$val.title}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">合作模式</label>
            <div class="layui-input-block">
                <select name="cooperation" lay-verify="required">
                    <option value=""></option>
                    <option value="1">进货价采购</option>
                    <option value="2">少量货物月结</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="width: 100px">产品介绍</label>
            <div class="layui-input-block">
                <textarea name="introduce" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <!--<div class="layui-form-item layui-form-text">-->
            <!--<label class="layui-form-label" style="width: 100px">拍摄地址</label>-->
            <!--<div class="layui-input-block">-->
                <!--<textarea name="customer" placeholder="请输入内容" class="layui-textarea">无</textarea>-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" id="add" class="btn btn-success">立即添加</button>
                <button type="button" class="btn btn-warning">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
    //上传
    layui.use('upload', function(){
        var upload = layui.upload;
        var bid = $("input[name=bid]").val();
        //上传图片
        upload.render({
            elem: '#uploadimage' //绑定元素
            ,url: "{:url('index/product/uploadimage')}?bid="+bid //上传接口
            ,field:'image'
            ,done: function(res){
                if(res.images){
                    var images = res.images;
                    $("#images").attr('src',"__ROOT__\\"+images);
                    $("#imgs").css('display','block');
                    $("#newimage").val(images);
                }else if(res.error){
                    layer.alert(res.error);
                }
            }
        });
        //上传二维码
        upload.render({
            elem: '#uploadcode' //绑定元素
            ,url:"{:url('index/product/uploadcode')}?bid="+bid //上传接口
            ,field:'code'
            ,done: function(res){
                if(res.code){
                    $("#code").attr('src',"__ROOT__\\"+res.code);
                    $("#codes").css('display','block');
                    $("#newcode").val(res.code);
                }else if(res.error){
                    layer.alert(res.error);
                }
            }
        });
        //上传视频
        upload.render({
            elem: '#uploadvideo' //绑定元素
            ,url: '/upload/' //上传接口
            ,auto:false
            ,accept:'video'
            ,bindAction:"#uploads"
            ,field:'video'
            ,done: function(res){
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    $("#add").click(function () {
        $.ajax({
            url:"{:url('index/product/insert')}",
            data:$("#insert").serialize(),
            type:"post",
            dataType:"json",
            success:function (res) {
                if(res.success){
                    layer.alert(res.success,{bnt:['确定']},function () {
                        window.location.reload();
                    });
                }else if(res.error){
                    layer.alert(res.error);
                }
            }
        });
    });

    function codes() {
        var barcode = $("input[name=barcode]").val();
        $.ajax({
            url:"{:url('index/product/barcode')}",
            data:"barcode="+barcode,
            type:"post",
            dataType:"json",
            success:function (res) {
                if(res.success){
                    layer.msg(res.success,{icon:5,time:2000});
                    $("input[name=barcode]").val('');
                }
            }
        });
    }
</script>
</html>